<template>
  <div>
    <div class="main-right-box">
      <div class="float-shopcart-box">
        <a class="shopcart-box" @click="shopcart" v-show="isLogin && !shopHide">
          <img src="../../static/shopcart.png">
          <span class="float-badge" v-if="shopcartnum > 0">{{shopcartnum <= 1000 ? shopcartnum : '999+'}}</span>
          <p class="text">采购清单</p>
        </a>
        <a class="shopcart-box" @click="$router.go(-1), shopback = false" v-if="shopcartback">
          <img src="../../static/shopcart-back.png">
          <p class="text">返回</p>
        </a>
        <span class="float-shop-pop" ref="floatShopRef">
          采购商品已添加
        </span>
      </div>

      <a href="javascript:void(0)" class="link_qq nav-box boder_bt" id="openQQ">
        QQ联系
      </a>
      <a href="javascript:void(0)" class="link_opinion nav-box" @click="opinionVisi = true">
        意见留言
      </a>

      <div href="javascript:void(0)" class="link_tel nav-box boder_bt" @mouseover="telshow = true" @mouseout="telshow = false">
        <div class="link-img-phone">
          电话联系
        </div>
        <div :class="{'link_tel-hover': telshow, 'link_number': true}">
          <p>客服电话：0576-86999962</p>
          <p>周一至周日：9:00-18:00</p>
        </div>
      </div>

      <div class="fix-btn backtop nav-box" v-show="!isTop" @click="top">回到顶部</div>
    </div>
    
    <el-dialog title="关于刀具联盟，我们想采纳您更多的意见" :visible.sync="opinionVisi" width="450px">
      <section class="text-box">
        <textarea class="textarea_con" v-model="feedtext" placeholder="请在此处写下您对我们产品的建议" rows="8"></textarea>
        <span class="word_num">{{textLen}}/<em>250</em></span>
        <el-button type="primary" size="small" :disabled="textLen === 0 " class="submitBtn" @click="submitFeed">确定</el-button>
      </section>
    </el-dialog>
  </div>
</template>
<script>
import {getCookie} from '@/config/mUntils'
import {postFeedback} from '@/service/get-data'
import {Dialog, Button} from 'element-ui'
import {eventBus} from '@/tool/events-bus'
export default {
  components: {
    elDialog: Dialog,
    elButton: Button
  },
  data () {
    return {
      opinionVisi: false, // 反馈窗口显示
      feedtext: '', // 反馈内容
      isTop: true, // 页面是否未滚动
      telshow: false // 客服电话隐藏/显示
    }
  },
  computed: {
    Token () {
      return getCookie('Token')
    },
    // 是否通过审核
    Exam () {
      return this.$store.state.user.isExam - 0
    },
    // 反馈内容长度
    textLen () {
      return this.feedtext.length
    },
    shopcartback () {
      return this.$store.state.shopcartback
    },
    isLogin () {
      return this.$store.state.user.isLogin
    },
    shopHide () {
      return this.$store.state.shopcartHide
    },
    shopcartnum () {
      return this.$store.state.shopcart.shopcartnum
    }
  },
  methods: {
    // 回到顶部
    top () {
      document.body.scrollTop = document.documentElement.scrollTop = 0
    },
    // 打开购物车
    shopcart () {
      if (!this.Token) return
      let actions = new Map([
        [1, () => {
          // this.$refs.floatShopRef.className = 'float-shop-pop'
          this.$router.push({name: 'ShopCart'})
          this.shopback = true
        }],
        [3, () => {
          this.$store.commit('EXAMNODO', true)
        }],
        [2, () => {
          this.$store.commit('EXAMFAIL', true)
        }],
        ['default', () => {
          this.$message.error('您的企业信息还在审核中,商品不能加入购物车,我们尽快给您审核.')
        }]
      ])
      let event = actions.get(this.Exam) || actions.get('default')
      event.call(this)
    },
    // 鼠标经过电话联系
    telfun (that) {
      this.telhover = true
    },
    mouseout (that) {
      that.children[1].className = 'link_number'
    },
    // 提交反馈
    async submitFeed () {
      let res = await postFeedback(this.feedtext)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.$message({
          message: '反馈提交成功，刀具联盟感谢您的支持!',
          duration: 2000,
          type: 'success'
        })
        this.opinionVisi = false
        this.feedtext = ''
      } else {
        this.$message({
          message: res.data.resultMsg,
          duration: 2000,
          type: 'error'
        })
        this.feedtext = ''
      }
    }
  },
  mounted () {
    let vm = this
    // 绑定调用QQ的按钮
    window.BizQQWPA.addCustom({aty: '0', a: '0', ws: 'http://www.viptool.cn', kfuin: '938002768', nameAccount: 4008882488, selector: 'openQQ'})
    // 页面滚动位置监听
    document.onscroll = (e) => {
      if (document.body.scrollTop === 0 && document.documentElement.scrollTop === 0 && window.pageYOffset === 0) {
        this.isTop = true
      } else {
        this.isTop = false
      }
    }
    eventBus.$on('show:pop', () => {
      vm.$refs.floatShopRef.className = 'float-shop-pop flow-animate'
      setTimeout(() => {
        vm.$refs.floatShopRef.className = 'float-shop-pop'
      }, 3000)
    })
  },
  watch: {
    // 计算反馈信息的字数
    feedtext (newval) {
      if (newval.length + 1 > 250) {
        this.$message({
          message: '字数最多250个',
          type: 'danger'
        })
        this.feedtext = this.feedtext.substring(0, 250)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .main-right-box{
    position: fixed;
    bottom: 35%;
    right: 0;
    width: 75px;
    height: 280px;
    z-index: 2;
  }
  .boder_bt{
    border-bottom: 1px solid #eee;
  }
  .nav-box{
    display: inline-block;
    width: 100%;
    height: 50px;
    text-align: center;
    border-left: 2px solid #E6C283;
    background: #fff;
    color: #333;
    font-size: 10px;
    line-height: 50px;
    // border-bottom: none;
  }

  .float-shopcart-box{
    width: 100%;
    margin-bottom: 10px;
  }
  .backtop{
    color: rgb(255, 150, 64);
  }
  .float-badge{
    position: absolute;
    font-size: 10px;
    min-width: 1.6em;
    line-height: 1.5em;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #f44;
    top: 2px;
    left: 38px;
    color: #fff;
    padding: 2px;
    text-align: center;
  }
  .text-box{overflow:hidden;margin-bottom:10px;}
  .textarea_con {
    box-sizing: border-box;
    width: 100%;
    outline: none;
    padding: 10px;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
  }
  .submitBtn{
    float: right;
    width: 120px;
    color: #444444;
  }
  .word_num{
    margin-top:10px;
    font-size: 14px;
    color: #999999;
    line-height: 30px;
    em{
      color: #2A2A2A;
    }
  }
</style>
